<template>
<view>
<view :class="'coupon-window ' + (window==true?'on':'')">
   <view class="couponWinList">
      <view v-for="(item, index) in couponList" :key="index" class="item acea-row row-between-wrapper">
         <view class="money font-color">￥<text class="num">{{item.discount}}</text></view>
         <view class="text">
            <view class="name">【{{item.desc}}】购物买{{item.min}}减{{item.discount}}</view>
            <view v-if="item.days != 0">有效期：{{item.days}}天</view>
            <view v-else>{{item.startTime}}-{{item.endTime}}</view>
         </view>
      </view>
   </view>
   <view class="lid">
      <view hover-class="none" @tap="getAllCoupon" class="bnt font-color">立即领取</view>
      <view class="iconfont icon-guanbi3" @tap="close"></view>
   </view>
</view>
<view class="mask" catchtouchmove="true" :hidden="window==false"></view>
</view>
</template>

<script>
const util = require("../../utils/util.js");
const api = require("../../config/api.js");
const user = require("../../utils/user.js");
var app = getApp();

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    window: {
      type: Boolean,
      default: true
    },
    couponList: {
      type: Array,
      default: () => []
    }
  },
  beforeMount: function () {},
  methods: {
    close: function () {
      this.$emit('onColse');
    },
    getAllCoupon: function () {
      if (!app.globalData.hasLogin) {
        uni.navigateTo({
          url: "/pages/auth/login/login"
        });
      }

      util.request(api.CouponReceiveAll, null, 'POST').then(res => {
        if (res.errno === 0) {
          uni.showToast({
            title: "领取成功"
          });
          this.$emit('onColse');
        } else {
          util.showErrorToast(res.errmsg);
        }
      });
    }
  }
};
</script>
<style>

.coupon-window{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:630rpx;height:649rpx;position:fixed;top:20%;z-index:99;left:50%;margin-left:-305rpx;transform:translate3d(0,-200%,0);transition:all .3s cubic-bezier(.25,.5,.5,.9);}
.coupon-window.on{transform:translate3d(0,0,0);}
.coupon-window .couponWinList{width:480rpx;margin:157rpx 0 0 60rpx;height:415rpx;overflow:auto;}
.coupon-window .couponWinList .item{width:100%;height:120rpx;background-color:#fff;position:relative;margin-bottom:17rpx;}
.coupon-window .couponWinList .item::after{content:'';position: absolute;width:18rpx;height: 18rpx;border-radius: 50%;background-color: #f2443a;left:25.5%;bottom:0;margin-bottom:-9rpx;}
.coupon-window .couponWinList .item::before{content:'';position: absolute;width:18rpx;height: 18rpx;border-radius: 50%;background-color: #f2443a;left:25.5%;top:0;margin-top:-9rpx;}
.coupon-window .couponWinList .item .money{width:130rpx;border-right:1px dashed #ddd;height:100%;text-align:center;line-height:120rpx;font-size:26rpx;font-weight:bold;}
.coupon-window .couponWinList .item .money .num{font-size:40rpx;color: #e00;}
.coupon-window .couponWinList .item .text{width:349rpx;font-size:22rpx;color:#999;padding:0 10rpx;box-sizing:border-box;}
.coupon-window .couponWinList .item .text .name{font-size:24rpx;color:#282828;font-weight:bold;margin-bottom:9rpx;}
.coupon-window .lid{background-image:url('');background-repeat:no-repeat;background-size:100% 100%;width:573rpx;height:224rpx;position:fixed;left:50%;top:20%;margin:424rpx 0 0 -296rpx;}
.coupon-window .lid .bnt{font-size:29rpx;width:440rpx;height:80rpx;border-radius:40rpx;background-color:#f9f1d3;text-align:center;line-height:80rpx;font-weight:bold;margin:98rpx auto 0 auto;}
.coupon-window .lid .iconfont{color:#fff;font-size:60rpx;text-align:center;margin-top:87rpx;}
</style>